<!--<div *ngIf="selectedCatalogue">
    <h2>{{selectedCatalogue.name}} </h2>
    <div><label>id: </label>{{selectedCatalogue.id}}</div>

    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedCatalogue.name" placeholder="name" />
    </div>

</div>-->
<!--<h1>{{title}}</h1>-->
<ul class="catalogue">
	<!--<li *ngFor="let catalogue of bookcatalogues" (click)="onSelect(catalogue)">-->
	<li *ngFor="let catalogue of bookcatalogues" [class.selected]="catalogue === selectedCatalogue" (click)="onSelect(catalogue)">
		<span class="badge">{{catalogue.id}}</span>
		<span>{{catalogue.name}}</span>
		<!--<span class="badge">{{catalogue.name}}</span>-->
		<!--<li *ngFor="let book of catalogue.booklists">
            <span>{{book.id}}</span>
            <span>{{book.name}}</span>
        </li>-->
		<button class="delete" (click)="delete(catalogue); $event.stopPropagation()">x</button>
</ul>
<div *ngIf="selectedCatalogue">
	<h2>
		{{selectedCatalogue.name}} is interesting. Know more...
	</h2>
	<button (click)="gotoDetail()">View Details</button>
</div>

<div>
	<!--<form>-->
	<label>catalogue id:</label> <input #CatalogueId />
	<label>catalogue name:</label> <input #CatalogueName />
	<button (click)="add(CatalogueId.value,CatalogueName.value)">
    Add
  </button>
</div>
<catalogue-search></catalogue-search>